<style scoped>
/*
*出单平台:王雷 2018/03/06
*/
  .single{
    /* border: #000 1px solid; */
}
  .single .content{
    /* border: red 1px solid; */
    box-sizing: border-box;
    background-color: #f6f6f6;
}
  .single .content .flex{
    display: -webkit-flex; 
    display: flex;
    flex-wrap: wrap;
}
  .single .content .flex .flx:hover{
    position: relative;
    top:-10px;
    color: #fff;
    box-shadow:  0px 2px 10px #fff, 0px 2px 10px gray;  
    transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out;
}

  .single .content .flex .flx{
    margin-top:16px;
    margin-right:12px;
    display: inline-block;
    box-sizing: border-box;
    /* border:  1px solid #000; */
    width:19%;
    /* height: 133px; */
    /* padding-right: 0; */
    background-color: #ffffff;
}
  .single .content .flx .ivu-col {
    height: 140px;
}
  .single .content .flx .ivu-col button{
    width: 100%;
    height: 100%;
}
/* .single .content .flx  button i{
    display: block;
    text-align: center;
} */
  .single .content .flx  button span{
    display: block;
    font-size: 16px;
    color: #fffefe;
    text-align: center;
}
  .single .content .flx{
    position: relative;
    border: 1px solid #DADADA;
    border-radius: 4px;
}
  .single .content .flx .title{
    /* color:red; */
    position: absolute;
    display: block;
    right: 0;
    top:0;
    font-size: 12px;
    color: #8a8a8a;
    height: 30px;
    width: 60px;
    text-align: center;
    line-height: 30px;
    background-color: #fff;
    border:1px solid #AAAAAA;
    border-right:none;
    border-top:none;
    border-bottom-left-radius: 26px;
    /* background-color: #2DB6F4; */
}
  .flx:hover .title{
    background: #2DB6F4 !important;
    border-color: #2DB6F4 !important;
    color: #fff !important;
    transition: all .4s ease-in-out !important;
}
  .single .content .flx .box{
    color: red;
    margin-top:30px;
    display: flex;
}
  .single .content .flx .box .left{
    /* border:1px solid red; */
    flex-grow: 4;
}
  .single .content .flx .box .left>img{
    display: inline-block;
    margin-left: 10px;
    margin-top: 10px;
    width:85px;
    height:85px;
    border-radius: 50%;
    border:1px solid #dddddd;
}
  .flx:hover img{
    /* background: #2DB6F4 !important; */
    border-color: #2DB6F4 !important;
    /* color: #fff !important; */
    box-shadow:  0px 2px 5px #fff, 0px 2px 6px gray; 
    transition: all .4s ease-in-out !important;
}
  .single  .content .flx .box .right{
     flex-grow: 6;
     font-size: 12px;
     color: #7d7d7d;
}
  .single  .flx .box .right ul{
    position: relative;
}
  .single .content .flx .box .right li{
    margin-top: 6px;
}
  .single .content .flx .box .right li:nth-child(1){
    font-size: 16px;
    margin-top:0;
}
  .single .content .flx .box .right li:nth-last-child(1){
   position: absolute;
   right: 5px;
   /* bottom:5px; */
}
  .single  .seen{
    text-align: center;
}
  .single  .seen img{
    margin-top:140px;
}
  .single .shows .lia{
      background-color: #2e7ee1;
      display: inline-block;
      width: 50px;
      border-radius: 20px;
      text-align: center;
  }
  .single .shows .lib{
    background-color:  #ff6769;
    display: inline-block;
    width: 50px;
    border-radius: 20px;
    text-align: center;
}
 .single  .showsame{
    float: left;
}
  .single  .shows{
     display: none;
      /* border: 1px solid #000; */
      color: #fff;
  }
 .single .shows:hover{
      cursor:pointer;
  }
  .single   .hover:hover .shows{
     display: block;
    }
</style>
<style>
.single .content .flx .ivu-icon{
    display: block;
    text-align: center;
    margin:auto;
    margin-top:10px;
    margin-bottom:10px;
    font-size:40px;
    width: 75px;
    height: 75px;
    line-height:75px;
    background-color: #fff;
    color: #2DB7F5;
    border-radius:50%;
}
.single .content .flx  button span{
    display: block;
    font-size: 16px;
    color: #fffefe;
    text-align: center;
    /* padding-bottom:10px !important; */
}

</style>

<template>
  <div class="wrap">
        <product-title></product-title>
        <div class="pl20 pr20">
            <Tabs type="card" :animated="false">
                <TabPane label="出单平台" class='single' v-show="tab==1">
                    <Form>
                        <div v-if="seen1">
                            <div v-if='seen1' style="height:765px;position:relative;background:#F6F6F6;" class="seen">
                                <figure>
                                    <img src="../../asset/img/people.png"/>
                                    <figcaption>没有可以查看的出单平台&#X3000;<span style="color:#2DB6F4"  @click="modalTrue()">立即添加</span></figcaption>
                                </figure>
                                
                            </div>
                        </div>  
                        <div class="common-box-body content" v-if="seen2">
                            <Row style="width:100%;box-sizing: border-box;" class="flex">
                                <div class="flx first">
                                    <Col>
                                        <Button size="large" class="fr" type="info" icon="plus-round" @click="modalTrue()">新增出单平台</Button>
                                    </Col>  
                                </div >
                                <template v-for="(item,index) in lists">
                                    <div class="flx hover">
                                        <div class="title" v-if="item.tip">{{item.tip}}</div>
                                        <div class="box">
                                            <div class="left">
                                                <img :src="item.logo"  class="images">
                                            </div>
                                            <div class="right">
                                                <ul>
                                                    <li>{{item.name}}</li>
                                                    <li>{{item.job_code}}</li>
                                                    <li>{{item.account}}</li>
                                                    <li class="shows showsame">
                                                        <span class="lia" @click="edit(index)">编辑</span>
                                                        <span class="lib"  @click="remove(index)">删除</span>
                                                    </li>
                                                    <li class="showsame">
                                                        <a :href="item.online_url" target="_blank">进入>></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </Row>
                        </div>
                    </Form>
                    
                </TabPane>  
            </Tabs>              
            <!-- <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="16">
                        <Button type="error" :disabled="tableaction" size="large" class="fl mr10 " @click="remove">删除</Button>
                    </Col>
                    <Col :md="24" :lg="8" class="tRight">
                        <Page :total="detailTotal" ref='pages' :page='formdata.p' :current="currentpage" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                    </Col>
                </Row>
            </div>              -->
        </div>
        <Modal v-model="showAddModal" ok-text="提交"  @on-ok="add" @on-cancel="cancela" :mask-closable='closeable' width="600" title="新增出单平台"  :loading="loading1" class-name="common-box-body showAddModal" :styles="{top: '150px'}">
            <Row>
                <Col>
                    <Form :model="org" ref="org" :rules="ruleValidates"  >
                        <Col :md='24' :lg="24">
                            <Col :md='18' :lg="18">
                                <Form-item label="出单平台" prop="online_id" required>
                                    <Select @on-change="setOption($event)"  :disabled="disable" v-model="org.online_id"  placeholder='请选择出单平台'>
                                        <Option  v-for="(item,index) in orglists" :value="item.id" :key="item.id">{{item.name}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :md='6' :lg="6">
                                <Form-item >
                                    <a style="color:#2DB7F5;" target="_blank" :href='href'><div>跳转至出单平台...</div></a>
                                </Form-item>
                            </Col>
                        </Col>
                        <Form-item label="工号" prop="job_code" required>
                            <Input v-model="org.job_code" placeholder="请输入工号"></Input>
                        </Form-item>
                        <Form-item label="账号" prop="account" required>
                            <Input v-model="org.account" placeholder="请输入账号"></Input>
                        </Form-item>
                        <Form-item label="密码" prop="online_pwd" v-if="eyes" required>
                            <Input v-model="org.online_pwd" type="password" icon='icon iconfont icon-chakan' @on-click="kan()" placeholder="请输入密码" >
                            </Input>
                        </Form-item>
                        <Form-item label="密码" prop="online_pwd" v-if="eyes2" required>
                            <Input v-model="org.online_pwd" type="text" icon='icon iconfont icon-close-eye' @on-click="kan2()" placeholder="请输入密码" >     
                            </Input>
                        </Form-item>
                    </Form>
                </Col>
            </Row>
        </Modal>
  </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import {get_online_by_yun,get_employee_online,create_employee_online,get_employee_online_list,delete_employee_online,update_employee_online} from '../../api/org.js'
export default {
    data () {        
        return {
            disable:false,
            lists:[],//循环列表
            eyes:true,
            eyes2:false,
            seen1:true,
            seen2:true,
            href:"javascript:;",
            tab:"",
            p:1,//对页面页数的定义-->初始化
            pagesize:10,//对页面的定义,出事定义10条数据
            detailTotal: 0,
            currentpage:1,
            tableaction:true, 
            seen1:true,
            closeable: false,//shif按ese按钮退出
            loading1: true,
            showAddModal:false,//点击设置,弹出模态框
            org:{
                name:"",
                online_id:"",//出单平台id
                job_code:'',//工号
                account:"",//账号
                online_pwd:"",//密码
            },
            formdata:{
                p:1,
                pagesize:10,
                cate:"",
            },
            ruleValidates: {
                    online_id:[
                        { required: true, message: '不能为空' }
                    ],
                    job_code: [{ required: true, message: '不能为空',  }],
                    account: [{ required: true, message: '不能为空',  }],
                    online_pwd: [{ required: true, message: '不能为空',  }],
                },
        }
    },
    components: {
        productTitle,
    },
    computed: {
       slidetoggle(){
            return this.$store.state.sildeshow
        },
    },
    created () {
        this.git();
        this.getlist();
        this.getcate();
    },
    methods: {
        git(){
            console.log(this.$store.state.solid,".......")
            if(this.$store.state.solid == "youzhi"){
                this.tab =1;
            }
            if(this.$store.state.solid == "you"){
                this.tab =0;
            }
        },
        // 编辑
        edit(index){
            var _this = this;
            _this.showAddModal = true; 
            _this.disable = true
            var _param = {
                id:_this.lists[index].id,
            }
            console.log(_param,"_param//..")
            new Promise((resolve, reject) => {
                get_employee_online(_param).then(res => {
                    if (res.data.err == 0) {
                        this.org = res.data.data;
                    } else {
                        this.$Message.error(res.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        // 删除
        remove(index){
             var _this = this;
                var _param = {
                    id:_this.lists[index].id
                }
                console.log(_param,"_param")
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该出单平台?',
                    onOk: () => {
                        new Promise((resolve, reject) => {
                            delete_employee_online(_param).then(res => {
                                if (res.data.err == 0) {
                                    this.$Message.success(res.data.info);
                                    _this.getlist();
                                } else {
                                    this.$Message.error(res.data.info);
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                    },
                });
        },
        // 对密码的看见设置
        kan(){
            this.eyes=false;
            this.eyes2=true;
        },
        kan2(){
            this.eyes=true;
            this.eyes2=false;
        },
        //点击立即新增 打开弹框
        modalTrue(){
            this.showAddModal = true; 
            this.disable = false;
            this.org.eid = this.$route.params.id;
            this.org.id = "";
            console.log(this.org,"....eid")
            console.log(this.$route.params.id,"this.$route.params.id;eid")
        },
        
        add(){
            var _this = this;
            _this.$refs['org'].validate((valid) => {
                if (valid) { 
                    
                    console.log(_this.org,"....eid")
                    if(_this.org.id){
                        new Promise((resolve, reject) => {
                            update_employee_online(_this.org).then(response => {
                                if (response.data.err == 0) {
                                    _this.showAddModal = false;
                                    _this.$Message.success(response.data.info);
                                    this.getlist();
                                    _this.$refs["org"].resetFields();
                                    _this.eyes=true;
                                    _this.eyes2=false;
                                } else {
                                    _this.$Message.error(response.data.info);
                                    _this.loading1 = false;
                                    _this.showAddModal = true;
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                    }else{
                        new Promise((resolve, reject) => {
                            create_employee_online(_this.org).then(response => {
                                if (response.data.err == 0) {
                                    _this.showAddModal = false;
                                    _this.$Message.success(response.data.info);
                                    this.getlist();
                                    _this.$refs["org"].resetFields();
                                    _this.eyes=true;
                                    _this.eyes2=false;
                                } else {
                                    _this.$Message.error(response.data.info);
                                    _this.loading1 = false;
                                    _this.showAddModal = true;
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                    }
                } else {
                    // 通过loading来阻止modal隐藏，然后手动修改loading来充值确定按钮
                    setTimeout(() => {
                        _this.loading1 = false;
                        _this.$nextTick(() => {
                            _this.loading1 = true;
                            _this.showAddModal = true;   
                        });
                    }, 1000);
                 }    
               })  
            },
            cancela () {
                this.$refs['org'].resetFields(); 
            },
            // 角色idname传值
            setOption(val){
                this.orglists.map(item=>{
                    if(item.id==val){
                        this.org.name = item.name;
                        this.href = item.online_url;
                    }
                })
            },
            // 获取出单平台
            getcate(){
                new Promise((resolve, reject) => {
                    get_online_by_yun().then(res => { 
                        console.log(res.data,"res.data.")
                        if (res.data.err == 0) {
                            this.orglists = res.data.data;
                        } else {
                            // this.$Message.error(res.data.info);
                            console.log("暂无出单平台,需要添加")
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            // sousuo
            search(){

            },
            // 获取列表服务
            getlist(){
                var _parma = {
                    eid:this.$route.params.id
                }
                console.log(this.$store.state.solid,"..")
                if(this.$store.state.solid == "youzhi"){
                    this.tab=1;
                    new Promise((resolve, reject) => {
                        get_employee_online_list(_parma).then(res => {
                            console.log(res.data,".....")
                            if (res.data.err == 0) {
                                this.lists = res.data.data;
                                this.tab=1;
                                this.seen1=false;
                                this.seen2=true;
                                console.log("有数据")
                            } else if(res.data.err == 1400) {
                                console.log("没有数据")
                                // this.$Message.error(res.data.info);
                                this.tab=1;
                                this.seen1=true;
                                this.seen2=false;
                            }else{
                                console.log("服务器报错")
                                this.$Message.error(res.data.info);
                            }
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
                }
                if(this.$store.state.solid == "you"){
                    this.tab=0;
                    new Promise((resolve, reject) => {
                        get_employee_online_list(_parma).then(res => {
                            console.log(res.data,".....")
                            if (res.data.err == 0) {
                                this.lists = res.data.data;
                                this.seen1=false;
                                this.seen2=true;
                                console.log("有数据")
                            } else if(res.data.err == 1400) {
                                console.log("没有数据1111")
                                // this.$Message.error(res.data.info);
                                this.seen1=true;
                                this.seen2=false;
                            }else{
                                console.log("服务器报错")
                                this.$Message.error(res.data.info);
                            }
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
                }
            },
    },
    mounted () {
        
    }
}
</script>

